<template>
  <div class="wrapper">
    <el-dialog
      title="选择地址"
      top="10vh"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose"
      append-to-body
      custom-class="address-dialog"
    >
      <div class="map-wrap">
        <el-amap-search-box
          class="search-box"
          :default="defaultValue"
          :search-option="searchOption"
          :on-search-result="onSearchResult"
        >
        </el-amap-search-box>
        <el-amap
          ref="map"
          vid="amapDemo"
          :events="events"
          :center="center"
          :zoom="zoom"
          :plugin="plugin"
          class="amap-demo"
        >
          <el-amap-marker :position="center" key="100"></el-amap-marker>
          <template v-if="form.address">
            <el-amap-text
              :text="form.address"
              :offset="[0, 30]"
              :position="[form.lon, form.lat]"
            ></el-amap-text>
          </template>
        </el-amap>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="$emit('close')">取 消</el-button>
        <el-button type="primary" @click="handleClickSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    let _this = this;
    return {
      zoom: 10,
      center: [116.4, 39.9],
      searchOption: {
        // 限制搜索城市的范围
        citylimit: false,
      },
      defaultValue: "",
      content: "",
      inputValue: "",
      searchResult: {
        address: "",
        latitude: "",
        longitude: "",
        name: "",
        type: "",
        country: "",
        province: "",
        city: "",
        area: "",
        township: "",
        street: "",
        neighborhood: "",
        locationName: "",
      },
      form: {
        address: "",
      },
      events: {
        click(e) {
          _this.center = [e.lnglat.lng, e.lnglat.lat];
          _this.form.lon = e.lnglat.lng;
          _this.form.lat = e.lnglat.lat;
          _this.getAddress(_this.center);
          _this.defaultValue = "";
        },
      },
      // plugin: ['ToolBar', {
      //     //调用定位工具开始定位，该定位需要配置服务请看第五点
      //     pName: 'Geolocation',
      //     events: {
      //         init(o) {
      //             // console.log('Geolocation init ', o);
      //             if (o.getCurrentPosition) {
      //                 o.getCurrentPosition((status, result) => {
      //                     // console.log('getCurrentPosition', result);
      //                     if (result && result.position) {
      //                         var lng = result.position.lng;
      //                         var lat = result.position.lat;
      //                         var formattedAddress = result.formattedAddress;
      //                         if (formattedAddress) {
      //                             self.$emit('update_address', formattedAddress);
      //                         }
      //                         self.set_location_center_point(lng, lat);
      //                         self.get_address();//请求获取具体地址

      //                     }
      //                 });
      //             }
      //         }
      //     }
      // }]
    };
  },
  props: ["dialogVisible"],
  methods: {
    handleClose() {
      this.$emit("close");
    },
    handleClickSubmit() {
      this.$emit("ok", this.form);
      this.$emit("close");
    },
    onSearchResult(pois) {
      //搜索
      let latSum = 0;
      let lngSum = 0;
      let that = this;
      if (pois && pois.length > 0) {
        //如果长度为1则无需转化
        let poi = pois[0];
        let lng = poi["lng"];
        let lat = poi["lat"];
        that.center = [lng, lat];
        that.zoom = 18;
        that.content = poi.name;
        that.searchResult.address = poi.address;
        that.searchResult.latitude = poi.lat;
        that.searchResult.longitude = poi.lng;

        that.form.lon = lng;
        that.form.lat = lat;

        that.getAddress(that.center);
      } else {
        that.searchResult = [];
      }
    },
    // 获取详细地址
    getAddress(center) {
      let _this = this;
      let geocoder = new AMap.Geocoder({});

      geocoder.getAddress(center, function (status, result) {
        if (status === "complete" && result.info === "OK") {
          let obj = result.regeocode.addressComponent;

          let locationName =
            obj.province +
            obj.city +
            obj.district +
            obj.township +
            obj.street +
            obj.streetNumber;

          _this.form.address = locationName;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
}

.map-wrap {
  position: relative;
}

.search-box {
  margin-bottom: 10px;
  // border: solid 1px #DCDFE6;
  // box-shadow: none;
  position: absolute;
  top: 10px;
  left: 10px;
  width: 280px;
  height: 40px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
  /deep/.search-tips {
    ul li {
      height: 32px;
      line-height: 32px;
    }
  }
}

.amap-demo {
  width: 100%;
  height: 400px;
}

/deep/.address-dialog .el-dialog__body {
  padding: 5px 15px 0px;
}
</style>